<template>
    <div class="background">
        <RSBackGround>
            <form class="message">
                <h1>用户注册</h1>
                <div>
                    <label for="nickname">
                        <span class="input-icon-nickname input-groupaddon"></span>
                        <input type="text" id="nickname" required minlength="2" maxlength="10" placeholder="请输入用户名" v-model="user.nickname">
                    </label>
                </div>
                <div>
                    <label for="email" >
                        <span class="input-icon-email input-groupaddon" ></span>
                        <input type="email" id="email" required placeholder="请输入邮箱" v-model="user.email" @change="change">
                    </label>
                </div>
                <p v-show="isShow" class="show">该邮箱已被注册！请重新填写</p>
                <div>
                    <label for="" >
                        <span class="input-icon-email input-groupaddon" ></span>
                        <input type="text" id="" required minlength="6" maxlength="6" placeholder="请输入验证码" v-model="user.verification_code">
                        <button @click="getCode" :disabled="canClick" class="getcode">
                            <span v-if="isCan">获取验证码</span>
                            <span v-else>{{ count }} s</span>
                        </button>
                    </label>

                </div>
                <div>
                    <label for="password">
                        <span class="input-icon-password input-groupaddon"></span>
                        <input type="password" id="password" minlength="8" maxlength="16" required placeholder="请输入密码" v-model="user.password">
                    </label>
                </div>

                <div class="input-checkbox">
                    <input type="checkbox" required v-model="user.readUserFile">
                    <p>我已阅读《好孩子官方商城用户协议》</p></div>
                <input type="submit" class="input-submit" value="完成注册" :disabled="isShow" @click="submitMessage($event)">
            </form>
        </RSBackGround>
    </div>
</template>

<script>
    import RSBackGround from "@/components/common/rsbackground/RSBackGround";
    import {debounce} from "@/common/util";
    import {register, findEmail, getCode} from "@/network/registerandsignIn";
    const TIME_COUNT = 60;
    export default {
        name: "Register",
        data() {
            return {
               user: {
                   nickname: '',
                   email: '',
                   verification_code: '',
                   password: '',
                   readUserFile: true
               },
                isShow: false,
                isCan: true,
                count: null,
                timer: null,
                key_code: null
            }
        },
        components: {
            RSBackGround
        },
        computed: {
          canClick() {
              if (this.user.email === ''){
                  return true
              }else {
                  if(this.isShow) {
                      return true
                  }
              }
              if (this.isCan) {
                  return false
              }else {
                  return true
              }
          }

        },
        methods: {
            submitMessage(e) {
                // this.$router.push('/')
                // if(this.user.nickname != '' && this.user.email != '' && this.user.password != '' &&
                //     this.user.readUserFile != false && this.user.verification_code != '') {
                //
                // }

                if(this.user.readUserFile && this.user.verification_code != '' && this.user.password != '') {
                    e.preventDefault();
                    if(parseInt(this.user.verification_code) == parseInt(this.key_code)) {
                        register(this.user);
                        alert('注册成功')
                        this.$router.push('/signIn')
                    }else {
                        alert("验证码错误");
                    }
                }else {
                    e.preventDefault();
                }

            },
            change() {
                debounce(
                    findEmail(this.user.email).then((res)=> {
                        if (res.data.res_code !== 2) {
                            this.isShow = true
                        } else {
                            this.isShow = false
                        }
                    }
                ))
            },
            getCode() {
                this.count = TIME_COUNT;
                if (!this.timer){
                    this.timer = setInterval(()=>{
                        this.isCan = false;
                        if (this.count <= 0) {
                            this.isCan = true
                            this.timer = null
                            clearInterval(this.timer)
                        }else {
                            this.count--;
                        }
                    },1000)
                getCode(this.user.email).then((res)=> { // 次数getCode为对axios框架进行再次封装的函数
                    console.log(res);
                    this.key_code = res.data.key_code
                })
                };

            }
        },

    }
</script>

<style scoped>
    .message {
        width: 300px;
        height: 450px;
        background-color: #fff;
        display: flex;
        flex-flow: column nowrap;
        padding: 20px;
        justify-content: space-around;
        margin-left: 1200px;
    }
    .message div label .input-groupaddon{
        display: block;
        height: 47px;
        width: 45px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 50%;
        background-color: #e0e0e0;
    }
    .message div label {
        display: flex;
        border: 1px #b0b0b0 solid;
    }
    .input-icon-nickname{
        background-image: url("../../assets/img/rsbackground/yonghu.svg");
    }
    .input-icon-password{
        background-image: url("../../assets/img/rsbackground/mima.svg");
    }
    .input-icon-email {
        background-image: url("../../assets/img/rsbackground/youxiang.svg");

    }
    .message div label input {
        height: 45px;
        flex: 1;
        border: none;
    }
    .input-checkbox {
        display: flex;
    }

    .input-checkbox input {
        margin-left: 50px;
        margin-top: 9px;

    }
    .input-submit {
        display: block;
        width: 150px;
        background-color: #ff4500;
        text-align: center;
        margin: 0 auto;
        color: #ffffff;
        height: 45px;
        border: none;
    }
    .show {
        color: red;
        width: 200px;
        margin: 0 auto;
    }
    .getcode {
        border: none;
        font-size: 12px;
        width: 72px;
    }

</style>